<!DOCTYPE html>
<!-- saved from url=(0017)http://f2er.club/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="keywords" content="醉牛前端，前端人的自留地，资源导航">
  <meta name="format-detection" content="telephone=no">
  <meta name="description" content="涉及一些优秀攻城狮的优秀博客、社区，实用的手册、工具，框架/库，以及在线教程和书籍推荐。为大家解决一些基本的，常见的问题和需求做专业的前端平台，提供你需要的东西。解放你的收藏夹，让它们只做最主要的事情">
  <meta name="author" content="创汇网校">
  <link rel="shortcut icon" href="res/favicon.ico">
  <title>前端人的自留地</title>
  <script src="http://hm.baidu.com/hm.js?a75b20e2c0f722c6e4bf18380088449f"></script><script src="res/html5shiv.js"></script>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link type="text/css" rel="stylesheet" href="res/reset.css">
  <link type="text/css" rel="stylesheet" href="res/main.css">
  <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?a75b20e2c0f722c6e4bf18380088449f";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
</script>
  </head>
<body ryt12822="1">
  <article>
    <!-- 头部 [[ -->
    <header id="header" class="clearfix">
      <div class="main_title fl">
        <div class="logo fl">
          <a target="_blank" href="https://shop60459643.taobao.com"> <i class="red"></i> <i class="blue"></i>
            <i class="green"></i>
          </a>
        </div>
        <div class="fl title-txt">
          <h1>醉牛前端</h1>
          <span>最专业&nbsp;&nbsp;最懂你</span>
        </div>
      </div>
      <h2 class="slogan fr">
        做专业的前端平台，提供你需要的东西
        <br>解放你的收藏夹，让它们只做最重要的事情</h2>
    </header>
    <!-- 头部 ]] -->
    <!-- 内容区 [[ -->
    <section class="layout main-wrap  content">
        <section class="col-main">
          <p class="tips">温馨提示：为了您的体验更佳，请在PC端使用</p>
          <article class="mainarea item" style="display: block; min-height: 314px;">
                <section class="mod">
                    <h3>手册</h3>
                    <section class="sub_mod">
                        <h4 class="sub_title">HTML</h4>
                        <ul>
                            <li>
                              <a href="http://www.jb51.net/onlineread/htmlchar.htm" target="_blank">Html特殊字符编码对照表</a>
                            </li>
                            <li>
                              <a href="http://www.inmotionhosting.com/img/infographics/html5_cheat_sheet_tags.png" target="_blank">HTML5标签速查</a>
                            </li>
                        </ul>
                    </section>
                    <section class="sub_mod">
                      <h4 class="sub_title">javascript</h4>
                      <ul>
                            <li>
                              <a href="http://hemin.cn/jq/" target="_blank">jquery</a>
                            </li>
                            <li>
                              <a href="http://www.css88.com/jqapi-1.9/" target="_blank">jqueryAPI(css88)</a>
                            </li>
                            <li>
                              <a href="http://api.jquery.com/" target="_blank">jqueryAPI(官网)</a>
                            </li>
                            <li>
                              <a href="http://overapi.com/javascript/" target="_blank">javascript</a>
                            </li>
                            <li>
                              <a href="http://yanhaijing.com/es5/#about" target="_blank">ES5</a>
                            </li>
                            <li>
                              <a href="http://www.ecma-international.org/ecma-262/6.0/" target="_blank">ES6</a>
                            </li>
                      </ul>
                    </section>
                    <section class="sub_mod">
                      <h4 class="sub_title">CSS</h4>
                      <ul>
                            <li>
                              <a href="http://css.doyoe.com/" target="_blank">css手册</a>
                            </li>
                            <li>
                              <a href="http://ued.ctrip.com/blog/wp-content/webkitcss/" target="_blank">ctrip webkitcss</a>
                            </li>
                            <li>
                              <a href="http://isux.tencent.com/css3/" target="_blank">css3动画手册</a>
                            </li>
                      </ul>
                    </section>
                    <section class="sub_mod">
                      <h4 class="sub_title">综合</h4>
                      <ul>
                            <li>
                              <a href="http://overapi.com/" target="_blank">overapi</a>
                            </li>
                            <li>
                              <a href="http://devdocs.io/" target="_blank">devdocs</a>
                            </li>
                      </ul>
                    </section>
                </section>
                <section class="mod">
                    <h3>工具</h3>
                    <section class="sub_mod">
                          <h4 class="sub_title">IDE/编辑器</h4>
                          <ul>
                                <li>
                                  <a href="http://www.sublimetext.com/" target="_blank">sublimetext</a>
                                </li>
                                <li>
                                  <a href="http://www.jetbrains.com/webstorm/" target="_blank">webstorm</a>
                                </li>
                                <li>
                                  <a href="https://atom.io/" target="_blank">atom</a>
                                </li>
                                <li>
                                  <a href="https://notepad-plus-plus.org/" target="_blank">notepad++</a>
                                </li>
                                <li><a href="http://www.vim.org/" target="_blank">vim</a></li>
                                <li><a href="https://www.visualstudio.com/" target="_blank">visualstudio</a></li>
                                <li>
                                  <a href="http://www.dcloud.io/" target="_blank">HBuilder</a>
                                </li>
                                <li><a href="http://www.adobe.com/cn/products/dreamweaver.html" target="_blank">dreamweaver</a></li>
                                <li><a href="http://www.eclipse.org/" target="_blank">eclipse</a></li>
                                <li><a href="https://www.editplus.com/" target="_blank">editplus</a></li>
                                <li><a href="https://developer.apple.com/xcode/" target="_blank">xcode</a></li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">代码美化/对照</h4>
                          <ul>
                              <li>
                                <a href="http://www.baidufe.com/fehelper/" target="_blank">fehelper</a>
                              </li>
                              <li>
                                <a href="http://www.css119.com/tool/codeCompare/" target="_blank">codecompare</a>
                              </li>
                              <li>
                                <a href="http://tool.oschina.net/jscompress" target="_blank">jscompress</a>
                              </li>
                              <li>
                                <a href="http://html.fwpolice.com/css/" target="_blank">css beautifier</a>
                              </li>
                              <li>
                                <a href="http://csscomb.com/online/" target="_blank">csscomb</a>
                              </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">css处理</h4>
                          <ul>
                              <li>
                                <a href="http://less.bootcss.com/" target="_blank">less(中)</a>
                              </li>
                              <li>
                                <a href="http://lesscss.org/" target="_blank">less(英)</a>
                              </li>
                              <li>
                                <a href="http://ecomfe.github.io/est/" target="_blank">less工具est</a>
                              </li>
                              <li>
                                <a href="http://sass-lang.com/" target="_blank">sass</a>
                              </li>
                              <li>
                                <a href="http://peiwen.lu/SassReferenceChineseTranslation/" target="_blank">sass中文文档</a>
                              </li>
                              <li>
                                <a href="http://www.zhangxinxu.com/jq/stylus/" target="_blank">stylus</a>
                              </li>
                              <li>
                                <a href="https://github.com/cssdream/cssgrace" target="_blank">cssgrace</a>
                              </li>
                              <li>
                                <a href="http://cssreset.com/" target="_blank">cssreset</a>
                              </li>
                              <li>
                                <a href="https://github.com/postcss" target="_blank">postcss</a>
                              </li>
                              <li>
                                <a href="http://css2less.cc/" target="_blank">css2less</a>
                              </li>
                              <li>
                                <a href="https://github.com/sindresorhus/sublime-autoprefixer" target="_blank">sublime-autoprefixer</a>
                              </li>
                              <li>
                                <a href="https://github.com/purifycss/purifycss" target="_blank">purifycss</a>
                              </li>
                              <li>
                                <a href="http://linxz.github.io/tianyizone/" target="_blank">css小工具</a>
                              </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">图片压缩/合并</h4>
                          <ul>
                              <li>
                                <a href="http://placehold.it/" target="_blank">placehold</a>
                              </li>
                              <li>
                                <a href="https://tinypng.com/" target="_blank">tinypng</a>
                              </li>
                              <li>
                                <a href="http://alloyteam.github.io/gopng/" target="_blank">gopng</a>
                              </li>
                              <li>
                                <a href="http://spritegen.website-performance.org/" target="_blank">spritegen</a>
                              </li>
                              <li><a href="http://www.spritecow.com/" target="_blank">spritecow</a></li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">在线制作</h4>
                          <ul>
                              <li>
                                <a href="http://css3generator.com/" target="_blank">css3generator</a>
                              </li>
                              <li>
                                <a href="http://lugolabs.com/caret" target="_blank">caret三角</a>
                              </li>
                              <li>
                                <a href="http://cssarrowplease.com/" target="_blank">cssarrow三角</a>
                              </li>
                              <li>
                                <a href="http://www.css3maker.com/" target="_blank">css3maker</a>
                              </li>
                              <li>
                                <a href="http://cubic-bezier.com/#.17,.67,.83,.67" target="_blank">cubic-bezier</a>
                              </li>
                              <li>
                                <a href="http://matthewlein.com/ceaser/" target="_blank">ceaser</a>
                              </li>
                              <li>
                                <a href="http://css3buttongenerator.com/" target="_blank">css3button</a>
                              </li>
                              <li>
                                <a href="http://enjoycss.com/start/" target="_blank">enjoycss</a>
                              </li>
                              <li>
                                <a href="http://www.createcss3.com/" target="_blank">createcss3</a>
                              </li>
                              <li>
                                <a href="http://the-echoplex.net/flexyboxes/" target="_blank">flexyboxes</a>
                              </li>
                              <li>
                                <a href="http://type-scale.com/" target="_blank">type-scale</a>
                              </li>
                              <li>
                                <a href="http://www.colorzilla.com/gradient-editor/" target="_blank">css3渐变</a>
                              </li>
                              <li>
                                <a href="http://csscreator.com/" target="_blank">csscreator</a>
                              </li>
                              <li>
                                <a href="http://tid.tenpay.com/labs/css3_keyframes_calculator.html" target="_blank">动画帧数计算器</a>
                              </li>
                              <li>
                                <a href="http://www.w3cschool.cc/try/bootstrap/layoutit/" target="_blank">bootstrap可视化布局系统</a>
                              </li>
                              <li>
                                <a href="http://www.formstylegenerator.com/" target="_blank">formstylegenerator</a>
                              </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">转换工具</h4>
                          <ul>
                              <li>
                                <a href="http://cn.diywz.com/OCR/" target="_blank">图片转文字</a>
                              </li>
                              <li>
                                <a href="http://px-em.com/" target="_blank">px-em</a>
                              </li>
                              <li>
                                <a href="http://onlinefontconverter.com/" target="_blank">字体格式online</a>
                              </li>
                              <li>
                                <a href="http://www.freefontconverter.com/" target="_blank">字体格式free</a>
                              </li>
                              <li>
                                <a href="http://tool.lanrentuku.com/daxiaoxie/" target="_blank">字母大小写转换</a>
                              </li>
                              <li>
                                <a href="http://www.aies.cn/" target="_blank">繁简字体转换</a>
                              </li>
                              <li>
                                <a href="http://www.liantu.com/" target="_blank">生成二维码</a>
                              </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">项目管理工具</h4>
                          <ul>
                              <li>
                                <a href="http://www.gruntjs.net/" target="_blank">grunt</a>
                              </li>
                              <li>
                                <a href="http://www.gulpjs.com.cn/" target="_blank">gulp</a>
                              </li>
                              <li>
                                <a href="http://webpack.github.io/" target="_blank">webpack</a>
                              </li>
                              <li>
                                <a href="http://fis.baidu.com/" target="_blank">fis</a>
                              </li>
                              <li>
                                <a href="https://www.npmjs.com/" target="_blank">npm</a>
                              </li>
                              <li>
                                <a href="https://packagecontrol.io/" target="_blank">packagecontrol</a>
                              </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">版本控制工具</h4>
                          <ul>
                              <li>
                                <a href="http://tortoisesvn.net/" target="_blank">svn</a>
                              </li>
                              <li>
                                <a href="http://www.bootcss.com/p/git-guide/" target="_blank">git</a>
                              </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">检测/测试/查询</h4>
                          <ul>
                              <li>
                                <a href="http://caniuse.com/" target="_blank">caniuse</a>
                              </li>
                              <li>
                                <a href="http://www.my-debugbar.com/wiki/IETester/HomePage/" target="_blank">IETester</a>
                              </li>
                              <li>
                                <a href="http://dev.modern.ie/tools/vms/" target="_blank">IE官方测试大礼包</a>
                              </li>
                              <li>
                                <a href="http://jigsaw.w3.org/css-validator/#validate_by_upload" target="_blank">w3c css验证</a>
                              </li>
                              <li>
                                <a href="http://validator.w3.org/" target="_blank">w3c html验证</a>
                              </li>
                              <li>
                                <a href="http://www.jslint.com/" target="_blank">jslint</a>
                              </li>
                              <li>
                                <a href="https://gsnedders.html5.org/outliner/" target="_blank">html5 outliner</a>
                              </li>
                              <li>
                                <a href="http://validator.w3.org/mobile-alpha/" target="_blank">移动端代码检测</a>
                              </li>
                              <li>
                                <a href="http://www.typetester.org/" target="_blank">Typetester</a>
                              </li>
                              <li>
                                <a href="http://nth-test.com/" target="_blank">nth-test</a>
                              </li>
                              <li>
                                <a href="http://screensiz.es/phone" target="_blank">screensiz</a>
                              </li>
                              <li>
                                <a href="http://browserhacks.com/" target="_blank">浏览器hack</a>
                              </li>
                              <li>
                                <a href="http://csstriggers.com/" target="_blank">csstriggers</a>
                              </li>
                              <li>
                                <a href="http://css4-selectors.com/" target="_blank">css4-selectors</a>
                              </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">综合</h4>
                          <ul>
                              <li>
                                <a href="https://github.com/codylindley/frontend-tools" target="_blank">frontend-tools</a>
                              </li>
                              <li>
                                <a href="http://tool.oschina.net/" target="_blank">在线工具大全</a>
                              </li>
                              <li>
                                <a href="http://note.youdao.com/share/?id=7f4948136c04fe6b9b3c914164adda54&type=note" target="_blank">前端工具集与站点整理</a>
                              </li>
                              <li>
                                <a href="http://dev.modern.ie/testdrive/" target="_blank">testdrive</a>
                              </li>
                              <li>
                                <a href="http://adobe.v404.cn/adobe/" target="_blank">adobe一家</a>
                              </li>
                          </ul>
                    </section>
                </section>
                <section class="mod">
                    <h3>代码在线演示</h3>
                    <ul>
                          <li>
                            <a href="http://jsfiddle.net/" target="_blank">jsfiddle</a>
                          </li>
                          <li>
                            <a href="http://jsbin.com/?html,output" target="_blank">jsbin</a>
                          </li>
                          <li>
                            <a href="http://jsdo.it/" target="_blank">jsdo it</a>
                          </li>
                          <li>
                            <a href="http://www.cssdesk.com/" target="_blank">cssdesk</a>
                          </li>
                          <li>
                            <a href="http://runjs.cn/" target="_blank">runjs</a>
                          </li>
                          <li>
                            <a href="http://www.landofcode.com/online-code-editor.php" target="_blank">online-code-editor</a>
                          </li>
                          <li>
                            <a href="http://ideone.com/" target="_blank">ideone</a>
                          </li>
                          <li>
                            <a href="http://codepen.io/" target="_blank">codepen</a>
                          </li>
                    </ul>
                </section>
          </article>
          <article class="mainarea item" style="min-height: 314px; display: none;">
                <section class="mod">
                    <h3>常用组件</h3>
                    <section class="sub_mod">
                          <h4 class="sub_title">综合</h4>
                          <ul>
                                <li>
                                  <a href="http://www.dowebok.com/" target="_blank">Dowebok</a>
                                </li>
                                <li>
                                  <a href="http://xueduany.github.io/KitJs/KitJs/index.html" target="_blank">KitJs</a>
                                </li>
                                <li>
                                  <a href="http://h5bp.github.io/Effeckt.css/" target="_blank">Effeckt</a>
                                </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">触屏滚动</h4>
                          <ul>
                              <li>
                                <a href="http://www.superslide2.com/TouchSlide/index.html" target="_blank">TouchSlide</a>
                              </li>
                              <li>
                                <a href="http://www.swiper.com.cn/" target="_blank">Swiper</a>
                              </li>
                              <li>
                                <a href="http://owlgraphic.com/owlcarousel/" target="_blank">owlcarousel</a>
                              </li>
                              <li>
                                <a href="http://www.superslide2.com/" target="_blank">superslide2</a>
                              </li>
                              <li>
                                <a href="http://be-fe.github.io/iSlider/" target="_blank">iSlider</a>
                              </li>
                              <li><a href="http://alvarotrigo.com/fullPage/" target="_blank">fullPage</a></li>
                              <li><a href="https://github.com/yanhaijing/zepto.fullpage" target="_blank">zepto.fullpage</a></li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">日期选择器</h4>
                          <ul>
                                <li>
                                  <a href="https://code.google.com/p/jquery-frontier-calendar/" target="_blank">jquery-frontier-calendar</a>
                                </li>
                                <li>
                                  <a href="http://www.bootcss.com/p/bootstrap-datetimepicker/" target="_blank">datetimepicker</a>
                                </li>
                                <li>
                                  <a href="http://amsul.ca/pickadate.js/" target="_blank">pickadate</a>
                                </li>
                                <li>
                                  <a href="http://flipclockjs.com/" target="_blank">flipclockjs</a>
                                </li>
                                <li>
                                  <a href="http://lexxus.github.io/jq-timeTo/" target="_blank">jq-timeTo</a>
                                </li>
                                <li>
                                  <a href="http://glad.github.io/glDatePicker/" target="_blank">glDatePicker</a>
                                </li>
                                <li>
                                  <a href="http://keith-wood.name/calendarsPicker.html" target="_blank">calendarsPicker</a>
                                </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">图表</h4>
                          <ul>
                                <li>
                                  <a href="http://echarts.baidu.com/" target="_blank">Echarts</a>
                                </li>
                                <li>
                                  <a href="http://www.hcharts.cn/" target="_blank">Highcharts(中)</a>
                                </li>
                                <li>
                                  <a href="http://www.highcharts.com/" target="_blank">Highcharts(英)</a>
                                </li>
                                <li>
                                  <a href="http://www.jscharts.com/" target="_blank">Jscharts</a>
                                </li>
                                <li>
                                  <a href="http://www.bootcss.com/p/chart.js/" target="_blank">Chart</a>
                                </li>
                          </ul>
                    </section>
                </section>
          </article>
          <article class="mainarea item" style="min-height: 314px; display: none;">
                <section class="mod">
                    <h3>框架/库</h3>
                    <section class="sub_mod">
                          <h4 class="sub_title">UI</h4>
                          <ul>
                                <li>
                                  <a href="http://getbootstrap.com/" target="_blank">bootstrap(英)</a>
                                </li>
                                <li>
                                  <a href="http://www.bootcss.com/" target="_blank">Bootstrap(中)</a>
                                </li>
                                <li>
                                  <a href="http://foundation.zurb.com/index.html" target="_blank">Foundation</a>
                                </li>
                                <li>
                                  <a href="http://www.jeasyui.net/" target="_blank">Jeasyui</a>
                                </li>
                                <li>
                                  <a href="http://metroui.org.ua/" target="_blank">Metroui</a>
                                </li>
                                <li>
                                  <a href="http://semantic-ui.com/" target="_blank">Semantic</a>
                                </li>
                                <li>
                                  <a href="http://purecss.io/grids/" target="_blank">Purecss</a>
                                </li>
                                <li>
                                  <a href="http://www.basscss.com/" target="_blank">Basscss</a>
                                </li>
                                <li>
                                  <a href="http://jqueryui.com/" target="_blank">jqueryui</a>
                                </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">js</h4>
                          <ul>
                                <li>
                                  <a href="http://jquery.com/" target="_blank">Jquery</a>
                                </li>
                                <li>
                                  <a href="http://www.zeptojs.cn/" target="_blank">zeptojs</a>
                                </li>
                                <li>
                                  <a href="https://angularjs.org/" target="_blank">Angularjs(英)</a>
                                </li>
                                <li>
                                  <a href="http://www.apjs.net/" target="_blank">Angularjs(中)</a>
                                </li>
                                <li>
                                  <a href="http://angularjs.cn/" target="_blank">Angularjs社区</a>
                                </li>
                                <li>
                                  <a href="https://facebook.github.io/react/" target="_blank">React(英)</a>
                                </li>
                                <li>
                                  <a href="http://reactjs.cn/" target="_blank">React(中)</a>
                                </li>
                                <li>
                                  <a href="http://julian.com/research/velocity/" target="_blank">velocity动画</a>
                                </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">动画库</h4>
                          <ul>
                                <li>
                                  <a href="http://daneden.github.io/animate.css/" target="_blank">animate</a>
                                </li>
                                <li>
                                  <a href="http://anicollection.github.io/" target="_blank">anicollection</a>
                                </li>
                                <li>
                                  <a href="http://elrumordelaluz.github.io/csshake/" target="_blank">cssshake</a>
                                </li>
                                <li>
                                  <a href="http://leaverou.github.io/animatable/" target="_blank">animatable</a>
                                </li>
                                <li>
                                  <a href="http://ianlunn.github.io/Hover/" target="_blank">Hover</a>
                                </li>
                                <li>
                                  <a href="http://www.justinaguilar.com/animations/" target="_blank">animations</a>
                                </li>
                                <li>
                                  <a href="http://alloyteam.github.io/JXAnimate/jxanimate_demo.html" target="_blank">JXAnimate</a>
                                </li>
                                <li>
                                  <a href="http://tobiasahlin.com/spinkit/" target="_blank">spinkit</a>
                                </li>
                                <li><a href="http://alloyteam.github.io/AlloyStick/" target="_blank">AlloyStick骨骼动画引擎</a></li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">字体图标</h4>
                          <ul>
                                <li>
                                  <a href="http://weloveiconfonts.com/" target="_blank">loveiconfonts</a>
                                </li>
                                <li>
                                  <a href="https://glyphter.com/" target="_blank">glyphter</a>
                                </li>
                                <li>
                                  <a href="http://perfecticons.com/" target="_blank">perfecticons</a>
                                </li>
                                <li>
                                  <a href="http://www.xiconeditor.com/" target="_blank">xiconeditor</a>
                                </li>
                                <li>
                                  <a href="http://fontello.com/" target="_blank">fontello</a>
                                </li>
                                <li>
                                  <a href="http://www.iconfont.cn/" target="_blank">阿里妈妈iconfont</a>
                                </li>
                                <li>
                                  <a href="https://icomoon.io/app/#/select" target="_blank">icomoon</a>
                                </li>
                                <li>
                                  <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font-Awesome</a>
                                </li>
                                <li>
                                  <a href="http://glyphicons.com/" target="_blank">glyphicons</a>
                                </li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">资源库</h4>
                          <ul>
                                <li>
                                  <a href="http://cdn.code.baidu.com/" target="_blank">百度静态资源共享库</a>
                                </li>
                                <li>
                                  <a href="http://npm.taobao.org/" target="_blank">taobaonpm</a>
                                </li>
                          </ul>
                    </section>
                </section>
          </article>
          <article class="mainarea item" style="min-height: 314px; display: none;">
                <section class="mod school">
                      <h3>方案荟萃</h3>
                      <ul>
                            <li>
                              <a href="http://alloyteam.github.io/Spirit/" target="_blank">腾讯移动web整体解决方案</a>
                            </li>
                            <li>
                              <a href="http://zeroclipboard.org/" target="_blank">Js复制</a>
                            </li>
                            <li>
                              <a href="https://github.com/philipwalton/flexbugs" target="_blank">Flexbugs</a>
                            </li>
                            <li>
                              <a href="http://jinlong.github.io/2015/05/24/css-retina-hairlines/" target="_blank">Retina屏1px线</a>
                            </li>
                            <li>
                              <a href="http://dotdotdot.frebsite.nl/" target="_blank">多行溢出省略</a>
                            </li>
                            <li>
                              <a href="http://www.stepday.com/topic/?690" target="_blank">IF IE ENDIF条件判断之IE10</a>
                            </li>
                            <li>
                              <a href="http://www.zhihu.com/question/20158063" target="_blank">Chrome 翻译插件</a>
                            </li>
                            <li>
                              <a href="http://blog.netsh.org/posts/website-retina_1779.netsh.html" target="_blank">网页retina优化</a>
                            </li>
                            <li>
                              <a href="http://www.imooc.com/article/1163" target="_blank">移动界面尺寸规范</a>
                            </li>
                            <li>
                              <a href="http://www.imooc.com/article/1176" target="_blank">常用meta</a>
                            </li>
                            <li>
                              <a href="http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/" target="_blank">垂直居中</a>
                            </li>
                            <li>
                              <a href="http://codepen.io/shshaw/full/gEiDt" target="_blank">css完全居中</a>
                            </li>
                            <li>
                              <a href="http://www.w3cplus.com/collective-5.html" target="_blank">居中之美</a>
                            </li>
                            <li>
                              <a href="http://www.cnblogs.com/mq0036/p/3531848.html" target="_blank">树状菜单</a>
                            </li>
                            <li>
                              <a href="http://www.w3ctrain.com/2015/07/24/comprehensive-guide-when-to-use-em-vs-rem/" target="_blank">em vs rem</a>
                            </li>
                            <li>
                              <a href="https://github.com/classicemi/blog/issues/3#issuecomment-113861251" target="_blank">css vs js</a>
                            </li>
                            <li>
                              <a href="https://github.com/phoetry/textareaAutoHeight" target="_blank">textarea高度自适应</a>
                            </li>
                            <li>
                              <a href="https://github.com/tuupola/jquery_lazyload" target="_blank">懒加载</a>
                            </li>
                            <li><a href="http://www.tuicool.com/articles/aEB3MbR" target="_blank">移动端点击事件背景框</a></li>
                      </ul>
                </section>
                <section class="mod school">
                      <h3>常见问题</h3>
                      <section class="sub_mod">
                          <h4 class="sub_title">前端指路</h4>
                          <ul>
                                <li>
                                  <a href="http://www.w3ctech.com/topic/983" target="_blank">写给初学前端工程师的一封信（w3ctech）</a>
                                </li>
                                <li>
                                  <a href="http://www.w3cplus.com/front-end-trip-on-road.html" target="_blank">前端路上的旅行（w3cplus）</a>
                                </li>
                                <li>
                                  <a href="http://www.w3cplus.com/css/write-to-front-end-developer-interview.html" target="_blank">写给前端面试者（w3cplus）</a>
                                </li>
                                <li>
                                  <a href="http://jiongks.name/blog/how-to-become-a-great-front-end-engineer/" target="_blank">如何成为一名卓越的前端工程师（勾三股四博客）</a>
                                </li>
                                <li><a href="http://www.epubit.com.cn/article/144" target="_blank">什么是全栈工程师</a></li>
                          </ul>
                      </section>
                      <section class="sub_mod">
                          <h4 class="sub_title">跨终端</h4>
                          <ul>
                                <li><a href="http://www.zhihu.com/question/25836425" target="_blank">响应式还是分开写</a></li>
                          </ul>
                      </section>
                      <section class="sub_mod">
                          <h4 class="sub_title">问答社区</h4>
                          <ul>
                                <li>
                                  <a href="http://www.zhihu.com/" target="_blank">知乎</a>
                                </li>
                                <li>
                                  <a href="https://www.quora.com/" target="_blank">quora</a>
                                </li>
                                <li>
                                  <a href="http://stackoverflow.com/" target="_blank">stackoverflow</a>
                                </li>
                                <li>
                                  <a href="http://segmentfault.com/questions/newest" target="_blank">segmentfault问答区</a>
                                </li>
                                <li><a href="http://www.html-js.com/qa" target="_blank">前端乱炖问答区</a></li>
                          </ul>
                      </section>
                </section>
          </article>
          <article class="mainarea item" style="min-height: 314px; display: none;">
                <section class="mod">
                      <h3>资料</h3>
                      <ul>
                        <li>
                          <a href="https://github.com/AlloyTeam/Mars" target="_blank">腾讯移动web前端知识库</a>
                        </li>
                        <li>
                          <a href="http://am-team.github.io/amg/dev-exp-doc.html" target="_blank">支付宝无线开发经验</a>
                        </li>
                        <li>
                          <a href="https://github.com/youyudehexie/node123" target="_blank">Nodejs中文资料导航</a>
                        </li>
                        <li>
                          <a href="https://github.com/wwsun/fe-knowledge-points" target="_blank">百度IFE</a>
                        </li>
                        <li>
                          <a href="http://browserdiet.com/zh/" target="_blank">权威前端性能指南</a>
                        </li>
                        <li>
                          <a href="https://github.com/justjavac/free-programming-books-zh_CN" target="_blank">免费的编程中文书籍索引</a>
                        </li>
                        <li>
                          <a href="http://www.w3cplus.com/front-end-bookmarks" target="_blank">前端收藏夹</a>
                        </li>
                        <li>
                          <a href="https://github.com/hawx1993/front-end-books-recommend" target="_blank">front-end-books-recommend</a>
                        </li>
                        <li><a href="http://dwz.cn/github-source" target="_blank">github资源收集</a></li>
                      </ul>
                </section>
                <section class="mod book">
                      <h3>书籍</h3>
                      <section class="sub_mod">
                          <h4 class="sub_title">HTML</h4>
                          <ul>
                                <li>
                                  <a href="http://dwz.cn/html5-css3" target="_blank">HTML 5与CSS 3权威指南(上册)(第2版)</a>
                                </li>
                                <li>
                                  <a href="http://dwz.cn/html5miss" target="_blank">HTML5秘籍(第2版) </a>
                                </li>
                                <li>
                                  <a href="http://dwz.cn/html-basic" target="_blank">HTML5与CSS3基础教程(第8版)</a>
                                </li>
                          </ul>
                      </section>
                      <section class="sub_mod">
                            <h4 class="sub_title">CSS</h4>
                            <ul>
                              <li>
                                <a href="http://dwz.cn/css-quanwei" target="_blank">CSS权威指南(第3版)</a>
                              </li>
                              <li>
                                <a href="http://dwz.cn/css-solve" target="_blank">精通CSS:高级Web标准解决方案(第2版) </a>
                              </li>
                              <li><a href="http://dwz.cn/css-garden" target="_blank">CSS禅意花园(修订版) </a></li>
                              <li><a href="http://dwz.cn/css-design" target="_blank">CSS设计指南（第3版）</a></li>
                              <li><a href="https://github.com/cssmagic/CSS-Secrets" target="_blank">CSS-Secrets</a></li>
                              <li><a href="http://dwz.cn/css-wonderful" target="_blank">精彩绝伦的CSS</a></li>
                              <li><a href="http://dwz.cn/css-img" target="_blank">图解CSS3:核心技术与案例实战</a></li>
                              <li><a href="http://dwz.cn/css3-miss" target="_blank">CSS3秘籍(第3版)</a></li>
                              <li><a href="http://dwz.cn/css3-practise" target="_blank">CSS3实战</a></li>
                              <li><a href="http://dwz.cn/css3-zhongmiao" target="_blank">众妙之门:精通CSS3</a></li>
                              <li class="off"><a href="http://dwz.cn/css-things" target="_blank">CSS那些事儿</a></li>
                            </ul>
                      </section>
                      <section class="sub_mod">
                            <h4 class="sub_title">Javascript</h4>
                            <ul>
                              <li>
                                <a href="http://dwz.cn/js-gaocheng" target="_blank">JavaScript高级程序设计(第3版)</a>
                              </li>
                              <li>
                                <a href="http://dwz.cn/js-quanwei" target="_blank">JavaScript权威指南(第6版)</a>
                              </li>
                              <li>
                                <a href="http://dwz.cn/js-dom" target="_blank">JavaScript DOM编程艺术(第2版) </a>
                              </li>
                              <li><a href="http://dwz.cn/js-lg" target="_blank">JavaScript语言精粹(修订版)</a></li>
                              <li><a href="http://dwz.cn/js-keweihu" target="_blank">编写可维护的JavaScript </a></li>
                              <li><a href="http://dwz.cn/js-model" target="_blank">JavaScript模式</a></li>
                              <li><a href="http://dwz.cn/js-function" target="_blank">JavaScript函数式编程</a></li>
                              <li><a href="http://dwz.cn/js-framework" target="_blank">JavaScript框架设计</a></li>
                              <li><a href="http://dwz.cn/jq-fengli" target="_blank">锋利的Jquery</a></li>
                              <li><a href="http://dwz.cn/jq-quanwei" target="_blank">jQuery权威指南(第2版)</a></li>
                              <li><a href="http://dwz.cn/jq-react" target="_blank">React:引领未来的用户界面开发框架</a></li>
                              <li><a href="http://dwz.cn/ng-next" target="_blank">用AngularJS开发下一代Web应用</a></li>
                              <li><a href="http://dwz.cn/ng-quanwei" target="_blank">AngularJS权威教程</a></li>
                              <li><a href="http://dwz.cn/node-shenqian" target="_blank">深入浅出Node.js</a></li>
                              <li><a href="http://dwz.cn/node-guanfang-doc" target="_blank">Node.js 官方文档中文版(kindle)</a></li>
                              <li><a href="http://dwz.cn/node-study-guide" target="_blank">Node学习指南 </a></li>
                              <li><a href="http://dwz.cn/node-liaobuqi" target="_blank">了不起的Node.js: 将JavaScript进行到底</a></li>
                              <li class="off"><a href="http://dwz.cn/ppk-js" target="_blank">ppk谈JavaScript</a></li>
                            </ul>
                      </section>
                      <section class="sub_mod">
                            <h4 class="sub_title">综合</h4>
                            <ul>
                                  <li>
                                    <a href="http://dwz.cn/fe-gaozhiliang" target="_blank">编写高质量代码:Web前端开发修炼之道</a>
                                  </li>
                                  <li>
                                    <a href="http://dwz.cn/fe-best" target="_blank">Web前端开发最佳实践</a>
                                  </li>
                                  <li>
                                    <a href="http://dwz.cn/fe-gaoxingneng" target="_blank">高性能网站建设指南:前端工程师技能精髓</a>
                                  </li>
                                  <li><a href="http://dwz.cn/webxingnengyouhua" target="_blank">高性能网站建设进阶指南：Web开发者性能优化最佳实践</a></li>
                                  <li><a href="http://dwz.cn/web-full" target="_blank">Web全栈工程师的自我修养</a></li>
                                  <li><a href="http://dwz.cn/web-rebuild" target="_blank">重构：改善既有代码的设计</a></li>
                            </ul>
                      </section>
                </section>
                <section class="mod">
                      <h3>教程</h3>
                      <ul>
                            <li>
                              <a href="http://www.imooc.com/" target="_blank">慕课网</a>
                            </li>
                            <li>
                              <a href="http://ife.baidu.com/" target="_blank">百度前端技术学院</a>
                            </li>
                            <li><a href="http://www.w3school.com.cn/" target="_blank">w3school</a></li>
                            <li>
                              <a href="http://www.aibusy.com/" target="_blank">busy前端工作室</a>
                            </li>
                      </ul>
                </section>
          </article>
          <article class="mainarea item" style="min-height: 314px; display: none;">
                <section class="mod">
                    <h3>中文综合</h3>
                    <ul>
                          <li>
                            <a href="http://www.chinaw3c.org/" target="_blank">w3c中国</a>
                          </li>
                          <li>
                            <a href="http://w3help.org/zh-cn/kb/" target="_blank">w3help</a>
                          </li>
                          <li>
                            <a href="http://www.w3cplus.com/" target="_blank">w3cplus</a>
                          </li>
                          <li>
                            <a href="http://www.w3ctech.com/" target="_blank">w3ctech</a>
                          </li>
                          <li>
                            <a href="http://www.css88.com/" target="_blank">css88</a>
                          </li>
                          <li>
                            <a href="http://div.io/" target="_blank">div.io</a>
                          </li>
                          <li>
                            <a href="http://www.qianduan.net/" target="_blank">前端观察</a>
                          </li>
                          <li>
                            <a href="http://www.html-js.com/" target="_blank">前端乱炖</a>
                          </li>
                          <li>
                            <a href="http://www.daqianduan.com/" target="_blank">大前端</a>
                          </li>
                          <li>
                            <a href="http://www.16code.com/" target="_blank">一流前端</a>
                          </li>
                          <li>
                            <a href="http://www.58img.com/" target="_blank">web前端资源网</a>
                          </li>
                          <li>
                            <a href="http://www.zaoduke.net/" target="_blank">前端早读课</a>
                          </li>
                          <li>
                            <a href="http://caibaojian.com/" target="_blank">前端开发博客</a>
                          </li>
                          <li>
                            <a href="http://segmentfault.com/" target="_blank">segmentfault</a>
                          </li>
                          <li>
                            <a href="http://msdn.microsoft.com/library/zh-CN/hh673549.aspx" target="_blank">IE10开发人员指南</a>
                          </li>
                          <li>
                            <a href="http://www.html5cn.org/portal.php" target="_blank">HTML5中国</a>
                          </li>
                          <li>
                            <a href="http://www.h5course.com/" target="_blank">HTML5学堂</a>
                          </li>
                          <li>
                            <a href="http://www.imweb.io/" target="_blank">imweb</a>
                          </li>
                          <li>
                            <a href="http://www.yyyweb.com/" target="_blank">前端里</a>
                          </li>
                          <li>
                            <a href="http://www.zuixiami.com/" target="_blank">最虾米</a>
                          </li>
                    </ul>
                </section>
                <section class="mod">
                    <h3>英文综合</h3>
                    <ul>
                          <li>
                            <a href="http://www.smashingmagazine.com/" target="_blank">smashingmagazine</a>
                          </li>
                          <li>
                            <a href="http://htmldog.com/" target="_blank">htmldog</a>
                          </li>
                          <li>
                            <a href="http://www.slideshare.net/" target="_blank">slideshare</a>
                          </li>
                          <li>
                            <a href="https://developer.mozilla.org/zh-CN/" target="_blank">MDN</a>
                          </li>
                          <li><a href="http://www.csszengarden.com/" target="_blank">csszengarden</a></li>
                          <li><a href="https://css-tricks.com/" target="_blank">css-tricks</a></li>
                          <li>
                            <a href="https://dev.opera.com/" target="_blank">dev opera</a>
                          </li>
                          <li>
                            <a href="http://www.sitepoint.com/" target="_blank">sitepoint</a>
                          </li>
                          <li>
                            <a href="http://tympanus.net/codrops/" target="_blank">codrops</a>
                          </li>
                          <li>
                            <a href="http://sixrevisions.com/" target="_blank">sixrevisions</a>
                          </li>
                          <li>
                            <a href="https://github.com/" target="_blank">github</a>
                          </li>
                          <li><a href="http://www.oreilly.com/" target="_blank">oreilly</a></li>
                          <li><a href="http://tutorialzine.com/" target="_blank">tutorialzine</a></li>
                    </ul>
                </section>
                <section class="mod">
                    <h3>国内团队</h3>
                    <ul>
                          <li>
                            <a href="http://www.75team.com/" target="_blank">奇舞团</a>
                          </li>
                          <li>
                            <a href="http://ued.ctrip.com/blog/" target="_blank">携程UED</a>
                          </li>
                          <li>
                            <a href="http://fex.baidu.com/" target="_blank">百度FEX</a>
                          </li>
                          <li>
                            <a href="http://cued.xunlei.com/" target="_blank">迅雷CUED</a>
                          </li>
                          <li>
                            <a href="http://www.alloyteam.com/" target="_blank">腾讯Alloyteam</a>
                          </li>
                          <li>
                            <a href="http://tgideas.qq.com/" target="_blank">腾讯TGideas</a>
                          </li>
                          <li>
                            <a href="http://tid.tenpay.com/" target="_blank">腾讯TID</a>
                          </li>
                          <li>
                            <a href="http://cdc.tencent.com/" target="_blank">腾讯CDC</a>
                          </li>
                          <li>
                            <a href="http://ued.taobao.org/blog/" target="_blank">淘宝UED</a>
                          </li>
                          <li>
                            <a href="http://mxc.yhd.com/blog/" target="_blank">1号店MXC</a>
                          </li>
                          <li>
                            <a href="http://f2e.souche.com/blog/" target="_blank">大搜车团队</a>
                          </li>
                          <li>
                            <a href="http://mux.alimama.com/" target="_blank">alimama</a>
                          </li>
                    </ul>
                </section>
                <section class="mod">
                    <h3>国内个人</h3>
                    <ul>
                          <li><a href="http://winter-cn.cnblogs.com/" target="_blank">winter</a></li>
                          <li>
                            <a href="http://blog.cssforest.org/" target="_blank">css森林</a>
                          </li>
                          <li><a href="http://www.twinsenliang.net/" target="_blank">twinsen</a></li>
                          <li><a href="http://www.evanyou.me/" target="_blank">尤小右 </a></li>
                          <li><a href="http://www.ruanyifeng.com/" target="_blank">阮一峰</a></li>
                          <li>
                            <a href="http://www.zhangxinxu.com/" target="_blank">张鑫旭</a>
                          </li>
                          <li>
                            <a href="http://yuguo.us/weblog/" target="_blank">余果</a>
                          </li>
                          <li>
                            <a href="http://sentsin.com/" target="_blank">贤心</a>
                          </li>
                          <li>
                            <a href="http://pufen.net/" target="_blank">飘飘</a>
                          </li>
                          <li><a href="http://bigc.at/" target="_blank">大猫</a></li>
                          <li><a href="http://www.cnblogs.com/_franky/" target="_blank">franky</a></li>
                          <li><a href="https://github.com/fouber/blog" target="_blank">前端农民工</a></li>
                          <li><a href="http://blog.xufei.gitpress.org/" target="_blank">民工精髓</a></li>
                          <li><a href="http://sofi.sh/" target="_blank">sofish</a></li>
                          <li>
                            <a href="https://github.com/lifesinger/lifesinger.github.com/issues?q=label%3Ablog" target="_blank">玉伯</a>
                          </li>
                          <li>
                            <a href="http://jayli.github.io/blog/" target="_blank">拔赤</a>
                          </li>
                          <li>
                            <a href="http://www.osmn00.com/" target="_blank">堂主</a>
                          </li>
                          <li>
                            <a href="http://www.aoao.org.cn/blog/" target="_blank">嗷嗷</a>
                          </li>
                          <li>
                            <a href="http://www.iyunlu.com/view/" target="_blank">一丝</a>
                          </li>
                          <li><a href="https://github.com/yisibl/blog/issues" target="_blank">一丝new</a></li>
                          <li><a href="http://myst729.github.io/" target="_blank">米粽粽</a></li>
                          <li>
                            <a href="http://jiongks.name/" target="_blank">勾三股四</a>
                          </li>
                          <li>
                            <a href="http://hax.iteye.com/" target="_blank">贺师俊</a>
                          </li>
                          <li>
                            <a href="http://hikejun.com/blog/" target="_blank">张克军</a>
                          </li>
                          <li>
                            <a href="http://cly84920.blog.163.com/" target="_blank">真阿当</a>
                          </li>
                          <li>
                            <a href="http://blog.doyoe.com/" target="_blank">doyoe</a>
                          </li>
                          <li>
                            <a href="http://www.cssmagic.net/" target="_blank">css魔法</a>
                          </li>
                          <li><a href="http://www.99css.com/" target="_blank">99css</a></li>
                          <li>
                            <a href="http://www.toobug.net/" target="_blank">Toobug</a>
                          </li>
                          <li><a href="http://random.cnblogs.com/" target="_blank">随机</a></li>
                          <li>
                            <a href="http://js8.in/" target="_blank">三水清</a>
                          </li>
                          <li><a href="https://github.com/zensh" target="_blank">严清</a></li>
                          <li><a href="http://lync.in/" target="_blank">justineo</a></li>
                          <li><a href="http://justjavac.com/" target="_blank">justjavac</a></li>
                          <li><a href="http://www.cnblogs.com/yexiaochai" target="_blank">叶小钗</a></li>
                          <li>
                            <a href="http://s5s5.me/" target="_blank">米随随</a>
                          </li>
                          <li>
                            <a href="http://www.topcss.org/" target="_blank">进步博客</a>
                          </li>
                          <li>
                            <a href="http://rpsh.net/" target="_blank">任平生</a>
                          </li>
                          <li><a href="http://www.cnblogs.com/iamzhanglei/" target="_blank">当耐特</a></li>
                          <li>
                            <a href="http://www.ofcss.com/" target="_blank">小李刀刀</a>
                          </li>
                          <li>
                            <a href="http://csshouse.net/" target="_blank">珍妮</a>
                          </li>
                          <li>
                            <a href="http://www.smallni.com/" target="_blank">丁小倪</a>
                          </li>
                          <li><a href="http://tiye.me/" target="_blank">题叶</a></li>
                          <li><a href="http://blog.sina.com.cn/a287019674" target="_blank">桑尼真</a></li>
                          <li><a href="http://melonh.com/" target="_blank">melonh</a></li>
                          <li>
                            <a href="http://www.planabc.net/" target="_blank">怿飞</a>
                          </li>
                          <li>
                            <a href="http://gaowhen.com/" target="_blank">糖拌西红柿</a>
                          </li>
                          <li>
                            <a href="https://xuexb.com/" target="_blank">前端小武</a>
                          </li>
                          <li>
                            <a href="http://pigerla.com/" target="_blank">spy</a>
                          </li>
                          <li>
                            <a href="http://www.xuanfengge.com/" target="_blank">轩枫阁</a>
                          </li>
                          <li><a href="http://ons.me/" target="_blank">西门的后花园</a></li>
                          <li>
                            <a href="http://jser.me/" target="_blank">草依山</a>
                          </li>
                          <li>
                            <a href="http://yujiangshui.com/" target="_blank">于江水</a>
                          </li>
                          <li>
                            <a href="http://www.soulteary.com/" target="_blank">苏洋</a>
                          </li>
                          <li>
                            <a href="http://www.zhouwenbin.com/" target="_blank">周文彬</a>
                          </li>
                          <li><a href="http://uicss.cn/" target="_blank">崔凯</a></li>
                          <li><a href="http://blog.bingo929.com/" target="_blank">彬Go</a></li>
                          <li>
                            <a href="http://www.cnblogs.com/tugenhua0707/" target="_blank">龙恩0707</a>
                          </li>
                          <li>
                            <a href="http://www.baidufe.com/" target="_blank">alien</a>
                          </li>
                          <li><a href="http://www.cnblogs.com/web-lexi/" target="_blank">乐小希</a></li>
                          <li>
                            <a href="http://www.dtao.org/" target="_blank">Dtao</a>
                          </li>
                          <li><a href="http://www.hacke2.cn/" target="_blank">hacke2</a></li>
                          <li><a href="http://hawx1993.github.io/" target="_blank">trigkit4</a></li>
                          <li><a href="https://github.com/dead-horse" target="_blank">dead-horse</a></li>
                          <li><a href="https://yimity.com/" target="_blank">一米</a></li>
                          <li>
                            <a href="http://ljinkai.github.io/" target="_blank">凯凯刘</a>
                          </li>
                          <li>
                            <a href="http://mutian.wang/" target="_blank">王牧天</a>
                          </li>
                          <li>
                            <a href="http://yanhaijing.com/" target="_blank">颜海镜</a>
                          </li>
                          <li>
                            <a href="http://www.ido321.com/" target="_blank">淡忘~浅思</a>
                          </li>
                          <li>
                            <a href="http://www.wufangbo.com/" target="_blank">武方博</a>
                          </li>
                          <li>
                            <a href="http://annn.me/" target="_blank">阿安</a>
                          </li>
                          <li><a href="http://www.css3china.com/" target="_blank">rex</a></li>
                          <li><a href="http://zhangwenli.com/" target="_blank">羡辙</a></li>
                          <li>
                            <a href="http://aibusy.com/blog/" target="_blank">busy</a>
                          </li>
                    </ul>
                </section>
                <section class="mod">
                    <h3>国外个人</h3>
                    <ul>
                          <li>
                            <a href="http://alvarotrigo.com/" target="_blank">alvarotrigo</a>
                          </li>
                          <li>
                            <a href="http://meyerweb.com/" target="_blank">Eric Meyer</a>
                          </li>
                          <li>
                            <a href="http://philipwalton.com/" target="_blank">philipwalton</a>
                          </li>
                    </ul>
                </section>
                <section class="mod">
                    <h3>设计</h3>
                    <ul>
                          <li>
                            <a href="http://www.zcool.com.cn/" target="_blank">站酷</a>
                          </li>
                          <li>
                            <a href="http://www.uisdc.com/" target="_blank">优设</a>
                          </li>
                          <li>
                            <a href="http://www.nipic.com/" target="_blank">昵图网</a>
                          </li>
                          <li>
                            <a href="http://www.lanrentuku.com/" target="_blank">懒人图库</a>
                          </li>
                          <li><a href="http://www.58pic.com/" target="_blank">千图网</a></li>
                          <li><a href="http://www.duidea.com/" target="_blank">独创意</a></li>
                          <li><a href="http://shijue.me/" target="_blank">视觉中国</a></li>
                          <li><a href="http://idesign.qq.com/" target="_blank">idesign设计导航</a></li>
                    </ul>
                </section>
                <section class="mod">
                    <h3>IT行业</h3>
                    <ul>
                          <li>
                            <a href="http://www.infoq.com/cn/" target="_blank">infoq</a>
                          </li>
                          <li>
                            <a href="http://blog.jobbole.com/" target="_blank">伯乐在线</a>
                          </li>
                          <li>
                            <a href="http://www.epubit.com.cn/" target="_blank">异步社区</a>
                          </li>
                          <li><a href="http://www.tuicool.com/" target="_blank">推酷</a></li>
                          <li>
                            <a href="http://blog.92fenxiang.com/" target="_blank">久艾分享</a>
                          </li>
                    </ul>
                </section>
          </article>
          <article class="mainarea item" style="min-height: 314px; display: none;">
                <section class="mod">
                    <h3>技术刊物</h3>
                    <ul>
                          <li>
                            <a href="http://fex.baidu.com/weekly/" target="_blank">百度FEX</a>
                          </li>
                          <li>
                            <a href="http://www.75team.com/weekly/" target="_blank">奇舞周刊</a>
                          </li>
                          <li>
                            <a href="http://forum.memect.com/" target="_blank">好东西论坛</a>
                          </li>
                          <li>
                            <a href="http://blogread.cn/news/" target="_blank">技术头条</a>
                          </li>
                    </ul>
                </section>
                <section class="mod public_media">
                    <h3>公众号</h3>
                    <ul>
                          <li>
                            前端早读课
                            <figure class="erwei">
                              <img src="res/zaoduke_erweima.jpg" alt="前端早读课"></figure>
                          </li>
                          <li>
                            w3ctech
                            <figure class="erwei">
                              <img src="res/w3ctech_erweima.jpg" alt="w3ctech"></figure>
                          </li>
                          <li>
                            w3cplus
                            <figure class="erwei">
                              <img src="res/w3cplus-weixin.jpg" alt="w3cplus"></figure>
                          </li>
                          <li>
                            busy
                            <figure class="erwei">
                              <img src="res/busy_weixin.jpg" alt="busy"></figure>
                          </li>
                          <li>
                            前端开发知识
                            <figure class="erwei">
                              <img src="res/web_knowledge.jpg" alt="前端开发知识"></figure>
                          </li>
                          <li>
                            前端周末
                            <figure class="erwei">
                              <img src="res/f2e_weekly.jpg" alt="前端周末"></figure>
                          </li>
                          <li>
                            前端开发博客
                            <figure class="erwei">
                              <img src="res/weixin-f2eblog.png" alt="前端开发博客"></figure>
                          </li>
                    </ul>
                </section>
                <section class="mod">
                    <h3>微博号</h3>
                    <section class="sub_mod">
                          <h4 class="sub_title">前端</h4>
                          <ul>
                                <li>
                                  <a href="http://weibo.com/webrebuild" target="_blank">webrebuild</a>
                                </li>
                                <li>
                                  <a href="http://weibo.com/jsconfchina" target="_blank">jsconfchina</a>
                                </li>
                                <li>
                                  <a href="http://weibo.com/cssconf" target="_blank">cssconf</a>
                                </li>
                                <li>
                                  <a href="http://weibo.com/fecss" target="_blank">css小组</a>
                                </li>
                                <li><a href="http://weibo.com/baidujs">js小组</a></li>
                                <li><a href="http://weibo.com/H5course" target="_blank">前端技术分享网</a></li>
                                <li><a href="http://weibo.com/nehzwd" target="_blank">网易杭州前端技术部</a></li>
                                <li><a href="http://weibo.com/w3ctech" target="_blank">w3ctech</a></li>
                                <li><a href="http://weibo.com/u/2012726081" target="_blank">专注web前端开发</a></li>
                                <li><a href="http://weibo.com/mobiweb" target="_blank">移动web前端设计</a></li>
                                <li><a href="http://weibo.com/f2eim" target="_blank">F2E前端技术社区</a></li>
                                <li><a href="http://weibo.com/207708585" target="_blank">前端开发网站</a></li>
                                <li><a href="http://weibo.com/kujian" target="_blank">前端开发博客</a></li>
                                <li><a href="http://weibo.com/divio" target="_blank">divio前端社区</a></li>
                                <li><a href="http://weibo.com/u/5322226545" target="_blank">慕课网前端学习小组</a></li>
                                <li><a href="http://weibo.com/qianduanrencai" target="_blank">前端网</a></li>
                                <li><a href="http://weibo.com/u/5261893910" target="_blank">前端大全</a></li>
                                <li><a href="http://weibo.com/u/2025709963" target="_blank">前端交流</a></li>
                                <li><a href="http://weibo.com/qianduanzaoduke" target="_blank">前端早读课</a></li>
                                <li><a href="http://weibo.com/u/2036070420" target="_blank">SegmentFault</a></li>
                                <li><a href="http://weibo.com/311290005" target="_blank">w3cplus</a></li>
                                <li><a href="http://weibo.com/u/1893751011" target="_blank">w3c中国</a></li>
                                <li><a href="http://weibo.com/html5cn" target="_blank">HTML5中国</a></li>
                                <li><a href="http://weibo.com/u/2558286970" target="_blank">HTML5</a></li>
                                <li><a href="http://weibo.com/html5kit" target="_blank">HTML5kit</a></li>
                                <li><a href="http://weibo.com/iweip" target="_blank">w3cmark</a></li>
                                <li><a href="http://weibo.com/u/1734409185" target="_blank">前端乱炖</a></li>
                                <li><a href="http://weibo.com/u/3244329632" target="_blank">前端快爆</a></li>
                                <li><a href="http://weibo.com/u/1996814695" target="_blank">前端网W3cfuns</a></li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">设计</h4>
                          <ul>
                                <li>
                                  <a href="http://weibo.com/uidesign" target="_blank">优秀网页设计</a>
                                </li>
                                <li>
                                  <a href="http://weibo.com/iconfans" target="_blank">UI中国</a>
                                </li>
                                <li>
                                  <a href="http://weibo.com/UCRED" target="_blank">UC优视RED设计中心</a>
                                </li>
                                <li><a href="http://weibo.com/txcdc" target="_blank">腾讯CDC体验设计</a></li>
                                <li><a href="http://weibo.com/liuyangdesiyue" target="_blank">交互设计UI</a></li>
                          </ul>
                    </section>
                    <section class="sub_mod">
                          <h4 class="sub_title">综合</h4>
                          <ul>
                                <li>
                                  <a href="http://weibo.com/xitucircle" target="_blank">稀土圈</a>
                                </li>
                                <li><a href="http://weibo.com/u/5606690513" target="_blank">技术头条</a></li>
                                <li><a href="http://weibo.com/haoawesome" target="_blank">好东西传送门</a></li>
                          </ul>
                    </section>
                </section>
          </article>
          <article class="mainarea item" style="min-height: 314px; display: none;">
                <section class="mod">
                      <h3>活动</h3>
                      <ul>
                        <li>
                          <a href="http://www.fequan.com/" target="_blank">前端圈走进名企</a>
                        </li>
                        <li>
                          <a href="http://segmentfault.com/d-day" target="_blank">segmentfault D-DAY</a>
                        </li>
                      </ul>
                </section>
                <section class="mod">
                      <h3>会议</h3>
                      <ul>
                            <li>
                              <a href="http://webrebuild.org/" target="_blank">webrebuild</a>
                            </li>
                            <li>
                              <a href="http://css.w3ctech.com/" target="_blank">cssconf</a>
                            </li>
                            <li>
                              <a href="http://2015.jsconf.cn/" target="_blank">jsconf</a>
                            </li>
                            <li>
                              <a href="http://adc.taobao.com/carnival/" target="_blank">adc·阿里技术嘉年华</a>
                            </li>
                            <li>
                              <a href="http://www.fequan.com/feday" target="_blank">feday</a>
                            </li>
                      </ul>
                </section>
          </article>
        </section>
        <!-- 左侧边栏导航 [[ -->
        <aside class="sidebar col-sub">
              <ul class="sidebar_list radius">
                    <li class="cur">
                      <a href="javascript:scroll(0,0);">手册/工具</a>
                    </li>
                    <li class="">
                      <a href="javascript:scroll(0,0);">常用组件</a>
                    </li>
                    <li class="">
                      <a href="javascript:scroll(0,0);">框架/库</a>
                    </li>
                    <li class="">
                      <a href="javascript:scroll(0,0);">方案荟萃/常见问题</a>
                    </li>
                    <li class="">
                      <a href="javascript:scroll(0,0);">资料/书籍/教程</a>
                    </li>
                    <li class="">
                      <a href="javascript:scroll(0,0);">博客/社区</a>
                    </li>
                    <li class="">
                      <a href="javascript:scroll(0,0);">电子读物/公众号/微博号</a>
                    </li>
                    <li class="">
                      <a href="javascript:scroll(0,0);">活动/会议</a>
                    </li>
              </ul>
        </aside>
    </section>
    <!-- 左侧边栏导航 ]] -->
    <footer class="footer">
        <nav class="footer_nav">
          <ul>
            <li class="contact clearfix">
            <a href="https://shop60459643.taobao.com" target="_blank" class="author_img_blog fl">
                <cite class="author">
                  <img src="res/author.png" alt="灵感_idea">
                </cite>
              </a>
              <section class="contact_cont fl">
                  <span>联系我</span>
              <p class="author_info"><span>宝贝链接：</span><a href="https://item.taobao.com/item.htm?_u=iasee3pca27&id=521156453516">Web前端视频教程</a></p>
              <!-- <p class="author_info"><span>个人博客：</span><a href="http://ideazhao.com/" target="_blank">http://ideazhao.com/</a></p> -->
              </section>
            </li>
            <li>
              <a href="https://shop60459643.taobao.com" class="link_about">关于本站</a>
              <p>本站涉及一些优秀攻城狮的优秀博客、社区，实用的手册、工具、框架/库，以及在线教程和书籍推荐。为大家解决一些基本的，常见的问题和需求。</p>
            </li>
          </ul>
        </nav>
    </footer>
  </article>
  <script src="res/jquery.min.js"></script>
  <script type="text/javascript">
      $(function(){
          var $li=$("aside ul li")
          var $area=$("article.mainarea");
          var $win=$(window).height();
              /*显示不同区块*/
              $li.click(function(){
                          $(this).addClass('cur').siblings().removeClass('cur');
                var $que=$(this).index();
                $area.eq($que).show().siblings("article").hide();
              })
              /*页面向下滚动侧边栏和主内容进行相应行为*/
              $(window).scroll(function(){

              var $Height=$(window).scrollTop();

              if($Height>105){
                    $(".sidebar_list").addClass('over');
              } else{
                    $(".sidebar_list").removeClass('over');
                    }
              })
        $('.col-main .mainarea').css("min-height",$win-269+'px');
        })
</script>

</body></html>